<template>
	<view class="worker">
		<image src="https://linshitong.oss-cn-shenzhen.aliyuncs.com/dev/image/2025/0812/09673202508121156597608.png" mode="widthFix" class="bg" />
		
		<view class="content">
			<view class="form">
				<uv-form
					ref="formRef"
					:model="model" :rules="rules" 
					labelWidth="180rpx" :labelStyle="{fontSize: '28rpx'}"
				>
					<uv-form-item label="手机号码" prop="tel" borderBottom required>
						<uv-input v-model="model.tel" border="none" placeholder="请输入手机号码"  />
					</uv-form-item>
					<uv-form-item label="真实姓名" prop="real_name" borderBottom required>
						<uv-input v-model="model.real_name" border="none" placeholder="请输入真实姓名"  />
					</uv-form-item>
					<uv-form-item label="性别" prop="sex" borderBottom required>
						<uv-radio-group v-model="model.sex" activeColor="#D32D26" >
							<uv-radio label="男" :name="2" :customStyle="{margin: '8px'}" />
							<uv-radio label="女" :name="1" :customStyle="{margin: '8px'}" />
						</uv-radio-group>
					</uv-form-item>
					<uv-form-item label="身份证号" prop="id_card_number" borderBottom required>
						<uv-input v-model="model.id_card_number" border="none" placeholder="请输入身份证号" />
					</uv-form-item>
					<uv-form-item label="居住地址" prop="address" borderBottom required>
						<uv-input v-model="model.address" border="none" placeholder="请输入居住地址" />
					</uv-form-item>
				</uv-form>
			</view>
		</view>
		
		<view class="content" style="padding-top: 0;">
			<view class="form1">
				<uv-text prefixIcon="*" text="证件照片" bold color="#333" size="30rpx" iconStyle="color: #E47470" />
				<uv-row gutter="30rpx" customStyle="flex-wrap: wrap">
					<uv-col span="6">
						<view class="item">
							<lst-upimg 
								:type="4"
								
								@success="e => upimgSuccess(e, '正面')"
								:list="model.card_face" name="正面"
							>
								<uv-image src='https://linshitong.oss-cn-shenzhen.aliyuncs.com/dev/image/2025/0816/3b656202508161025153863.png' height="60" mode="aspectFit" />
								<uv-gap height="8" bgColor="transparent" />
								<uv-text text="身份证人像面" color="#333" size="24rpx" align="center" />
							</lst-upimg>
						</view>
					</uv-col>
					<uv-col span="6">
						<view class="item">
							<lst-upimg 
								:type="4"
							
								@success="e => upimgSuccess(e, '反面')"
								:list="model.card_bg" name="反面"
							>
								<uv-image src='https://linshitong.oss-cn-shenzhen.aliyuncs.com/dev/image/2025/0816/3b656202508161025153863.png' height="60" mode="aspectFit" />
								<uv-gap height="8" bgColor="transparent" />
								<uv-text text="身份证国徽面" color="#333" size="24rpx" align="center" />
							</lst-upimg>
						</view>
					</uv-col>
				</uv-row>
			</view>
		</view>
		
		<view class="content" style="padding-top: 0;">
			<view class="form1 flex align-center justify-between">
				<uv-text prefixIcon="*" :text="community || '选择小区'" :lines="1"  bold color="#333" size="30rpx" iconStyle="color: #E47470" />
				<uv-button text="请选择" shape="circle" color="#D32D26" size="mini" @click="open" />
			</view>
		</view>
		<uv-gap height="5" bgColor="transparent" />
		<view class="approved-reason" v-if="approvedStatus==2">当前申请审核未通过，拒绝原因：{{approvedReason}}，请修改后重新提交。</view>
		<view class="form2">
			<view class="btn" @click="submit">{{ buttonText }}</view>
			<uv-gap height="10" bgColor="transparent" />

			<view class="flex align-center justify-center">
				<uv-checkbox-group v-model="checkbox" activeColor="#D32D26" inactiveColor="#D32D26" class="checkbox" >
					<uv-checkbox :customStyle="{marginBottom: '8px'}" label="已阅读并同意《邻事通管家注册协议》" :name="1" />
				</uv-checkbox-group>
			</view>
		</view>
		<uv-gap height="5" bgColor="transparent" />
		
		<uv-popup ref="citySelectRef" mode="bottom">
			<view class="citySelect">
				<lst-city-select :level="5" :init="citySelectInit" @select="citySelect"  />
			</view>
		</uv-popup>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive,
		nextTick,
		computed,
		onMounted,
		onUnmounted
	} from 'vue';
	import {
		navigate,
		checkEmptyProperties,
		isEmpty
	} from '@/util/tools.js';
	import { joinManager, joinManagerDetail } from '@/api'
	
	const approvedReason = ref('')
	const approvedStatus = ref(null)
	const buttonText = ref('提交资料')
	
	const checkbox = ref([])
	const formRef = ref(null)
	const community = ref('')
	const citySelectRef = ref(null)
	
	const model = reactive({
		tel: '', real_name: '', sex: 2, id_card_number: '', address: '',
		card_face: '', card_bg: '', community_province_id: '', community_city_id: '', 
		community_area_id: '', community_town_id: '', community_id: ''
	})
	
	const citySelectInit = computed(() => {
		const { community_province_id, community_city_id, community_area_id , community_town_id, community_id } = model
		if(community_province_id && community_city_id && community_area_id  && community_town_id && community_id) {
			return [model.community_province_id, model.community_city_id, model.community_area_id, model.community_town_id, model.community_id]
		} else { 
			return []
		}
	})
	const certifi = reactive({ cardIs: '', cardThe: '' })
	
	const rules = {
		real_name: { type: 'string', required: true, message: '请填写真实姓名', trigger: ['blur', 'change'] },
		tel: { type: 'string', required: true, message: '请填写手机号', trigger: ['blur', 'change'] },
		id_card_number: { type: 'string', required: true, message: '请填写身份证号', trigger: ['blur', 'change'] },
		address: { type: 'string', required: true, message: '请填写居住地址', trigger: ['blur', 'change'] },
	}
	
	const setStatus=()=>{
		if (isEmpty(approvedStatus.value)) {
			return;
		}
		let status = approvedStatus.value * 1
		switch (status) {
			case 2:
				buttonText.value = '重新提交'
				break;
			default:
				buttonText.value = '提交资料'
				break;
		}
	}
	
	
	// 选择接单社区
	const citySelect = (e) => {
		citySelectRef.value.close()
		if(e) {
			community.value = e.map(e => e.name).join('/')
			model.community_province_id = e[0].id 	// 接单社区-省id
			model.community_city_id = e[1].id 		// 接单社区-市id
			model.community_area_id = e[2].id 		// 接单社区-区县id
			model.community_town_id = e[3].id 		// 接单社区-乡镇id
			model.community_id = e[4].id			// 接单社区-小区id
		}
	}
	
	onMounted(() => {
		// 监听事件
		uni.$on('refreshAreaSelect', (data) => {
		    community.value = data.select;
			model.community_province_id = data.province_id;
			model.community_city_id = data.city_id;
			model.community_area_id = data.area_id;
			model.community_town_id = data.town_id
			model.community_id = data.community_id
		})
	})
	
	onUnmounted(() => {
		// 页面卸载时取消监听，避免内存泄漏
		uni.$off('refreshAreaSelect')
	})
	
	
	
	// 上传图片
	const upimgSuccess = (fileList, type) => {
		if(type === '反面') model.card_bg = fileList.length === 0 ? '' : fileList[0].src
		if(type === '正面') model.card_face = fileList.length === 0 ? '' : fileList[0].src
	}
	
	const open = () => {
	
		
		let url = '/pages-public/SelectCityArea/SelectCityArea?select_level=5'
		navigate(url)
	}
	
	
	
	const toRoute = (url) => uni.navigateTo({ url })
	
	const submit = async () => {
		
		await formRef.value.validate()
		if(!model.card_face) return uni.$uv.toast('请上传身份证人像面')
		if(!model.card_bg) return uni.$uv.toast('请上传身份证国徽面')
		if(!model.community_id) return uni.$uv.toast('请选择小区')
		if(checkbox.value.length === 0) return uni.$uv.toast('请先同意协议')
		uni.showLoading({ title: '提交中', mask: true })
		const res = await joinManager(model)
		buttonText.value = '等待审核'
		uni.hideLoading()
		uni.$uv.toast('提交成功')
	}
	
	
	const joinDetail = async () => {
		uni.showLoading({ title: '加载中', mask: true })
		const { result } = await joinManagerDetail()
		if(!result.id) return uni.hideLoading()
		checkbox.value = [1]
		model.id = result.id
		model.tel = result.tel
		model.real_name = result.real_name
		model.sex = result.sex
		model.id_card_number = result.id_card_number
		model.address = result.address
		model.card_face = result.card_face
		model.card_bg = result.card_bg
		model.community_province_id = result.community_province_id
		model.community_city_id = result.community_city_id
		model.community_area_id = result.community_area_id
		model.community_town_id = result.community_town_id
		model.community_id = result.community_id
		community.value = result.community_address
		
		approvedReason.value = result.approved_reason
		approvedStatus.value = result.approved_status
		setStatus()
		
		uni.hideLoading()
	}
	
	joinDetail()
</script>

<style>
	page {
		background-color: #F6F4F7;
	}
</style>

<style lang="scss" scoped>
	.approved-reason{
		padding: 30upx;
		box-sizing: border-box;
		font-size: 24upx;
		color: #666;
	}
	.worker {
		position: relative;
		.bg {
			top: 0;
			z-index: 1;
			width: 100%;
			position: absolute;
		}
		.content {
			z-index: 2;
			padding: 30rpx;
			box-sizing: border-box;
			position: relative;
		}
		.citySelect {
			height: calc(100vh - var(--window-top));
		}
	}
	.form {
		padding: 30rpx 50rpx;
		border-radius: 20rpx;
		background-color: #fff;
	}
	.form1 {
		padding: 30rpx 20rpx;
		border-radius: 20rpx;
		background-color: #fff;
	}
	.form2 {
		padding: 0 30rpx;
		box-sizing: border-box;
	}
	.item {
		width: 100%;
		display: flex;
		overflow: hidden;
		border-radius: 10rpx;
		padding-top: 40rpx;
		padding-bottom: 30rpx;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		margin-top: 30rpx;
		background-color: #F7F5F8;
		image {
			width: 100%;
			display: block;
			margin: 0 auto;
			margin-bottom: 20rpx;
		}
	}
	.btn {
		color: #fff;
		width: 100%;
		height: 100rpx;
		z-index: 110;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 36rpx;
		box-sizing: border-box;
		background-color: #D32D26;
	}
	.checkbox {
		::v-deep .uv-checkbox {
			margin: 0 auto;
			margin-bottom: 16rpx;
		}
	}
</style>